@import "../../../style/index.less";

@delete-icon-color: @color_font_400;
@delete-icon-hover-color: @color_delete;

.halo-com-security-detail {
  display: flex;
  .sg-image {
    flex: 1;
    width: 150px;
    height: 380px;
    min-width: 150px;
    max-width: 150px;
    background: url(/static/assets/sg_bg@2x.png) no-repeat 0 0;
    background-size: 90%;
  }
  .sg-image-ingress {
    .arrow-up,
    .arrow-left,
    .arrow-right {
      background: url(/static/assets/sg_arrow.png) no-repeat 0 0;
      padding: 10px;
      background-size: 230%;
      position: absolute;
    }
    .arrow-up {
      top: 125px;
      left: 62px;
      transform: rotateZ(90deg);
    }
    .arrow-left {
      top: 150px;
      left: 48px;
    }
    .arrow-right {
      top: 138px;
      left: 68px;
      transform: rotateZ(180deg);
    }
    .arrow-circle {
      background: url(/static/assets/sg_arrow.png) no-repeat -20px 0;
      background-size: contain;
      padding: 30px;
      position: absolute;
      top: 200px;
      left: 45px;
    }
  }
  .sg-image-egress {
    .arrow-up, .arrow-left, .arrow-right {
      background: url(/static/assets/sg_arrow.png) no-repeat 0 0;
      padding: 10px;
      background-size: 230%;
      position: absolute;
    }
    .arrow-up {
      top: 116px;
      left: 74px;
      transform: rotateZ(-90deg);
    }
    .arrow-left {
      top: 138px;
      left: 39px;
      transform: rotateZ(180deg);
    }
    .arrow-right {
      top: 150px;
      left: 77px;
    }
    .arrow-circle {
      background: url(/static/assets/sg_arrow.png) no-repeat -20px 0;
      background-size: contain;
      padding: 30px;
      position: absolute;
      top: 173px;
      left: 32px;
      transform: rotateZ(180deg);
    }
  }
  .sg-data {
    flex: 1;
  }
  .tip,
  .btn-group,
  .create-btn,
  .table {
    margin-bottom: 16px;
  }
  i.delete-action {
    color: @delete-icon-color;
    cursor: pointer;
    &:hover {
      color: @delete-icon-hover-color;
    }
  }
}
